<template>
	<view class="tools">
		<view class="jilu">请输入您要查询的身份证号</view>
		<view class="t_input">
			<view class="title">身份证号</view>
			<view class="inputs">
				<input v-model="idcard" placeholder="例如: 430421187609233453"
					placeholder-style="font-size: 28upx; color: #999"></input>
			</view>
			<view class="all_btn"></view>
		</view>
		<view class="result" v-show="showDetail">
			<view class="title">详细信息</view>
			<tui-form ref="uForm" label-width="150">
				<!-- <tui-form-item label="地区:">{{info.area}}</tui-form-item> -->
				<tui-form-item label="性别:">{{info.gender}}</tui-form-item>
				<tui-form-item label="生日:">{{info.birthday}}</tui-form-item>
				<tui-form-item label="星座:">{{info.constellation}}</tui-form-item>
				<tui-form-item label="生肖:">{{info.zodiac}}</tui-form-item>
			</tui-form>

		</view>
		<!-- <u-empty style="margin-top: 80upx;" v-show="empty" text="暂无手机信息" mode="list"></u-empty> -->
		<view @tap="query" class="addclerk" :style="'background:' + colors">
			查询
		</view>
		<!-- <u-toast ref="uToast" /> -->
		<tui-toast ref="uToast"></tui-toast>
	</view>
</template>

<script>
	var app = getApp();
	// import itemCell from "../../commponent/setting/item-cell";
	export default {
		data() {
			return {
				colors: '',
				idcard: '341126199601180916',
				info: {},
				showDetail: false,
				empty: false
			};
		},
		components: {
			// itemCell
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			query() {
				if (!this.idcard) {
					this.$refs.uToast.show({
						title: '身份证号不能为空',
						icon: 'error'
					})
					return;
				}

				if (!uni.$utils.idCard(this.idcard)) {
					this.$refs.uToast.show({
						title: '身份证号不正确',
						icon: 'error'
					})
					return;
				}

				const info = this.parseIDCard(this.idcard);
				if (info) {
					this.empty = false
					this.showDetail = true
					this.info = info
				} else {
					this.empty = true
					this.showDetail = false
				}
			},
			/**
			 * 身份证信息解析方法
			 * @param {string} id 18位身份证号码
			 * @returns {object} 包含完整信息的对象
			 */
			parseIDCard(id) {
				// 基础校验
				if (typeof id !== 'string' || !/^\d{17}[\dX]$/.test(id)) {
					throw new Error('无效的身份证号码');
				}

				// 地区数据示例 (需补充完整数据)
				const areaCodes = {
					'11': '北京市',
					'1101': '北京市市辖区',
					'110101': '北京市东城区',
					'44': '广东省',
					'4403': '广东省深圳市',
					'440304': '广东省深圳市福田区'
				};

				// 生肖基准年（2020年鼠年）
				const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];

				// 日期有效性验证
				const fullYear = parseInt(id.substr(6, 4));
				const month = parseInt(id.substr(10, 2)) - 1;
				const day = parseInt(id.substr(12, 2));
				const birthDate = new Date(fullYear, month, day);

				if (
					birthDate.getFullYear() !== fullYear ||
					birthDate.getMonth() !== month ||
					birthDate.getDate() !== day
				) {
					throw new Error('无效的出生日期');
				}

				// 校验码验证
				const weight = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
				const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
				let sum = 0;

				for (let i = 0; i < 17; i++) {
					sum += parseInt(id[i]) * weight[i];
				}
				console.log(id)
				if (id[17].toUpperCase() !== checkCodes[sum % 11]) {
					throw new Error('身份证校验码错误');
				}

				// 星座计算（精确到日）
				const getConstellation = (m, d) => {
					const dates = [20, 19, 21, 20, 21, 22, 23, 23, 23, 24, 23, 22];
					const constellations = [
						'摩羯座', '水瓶座', '双鱼座', '白羊座', '金牛座', '双子座',
						'巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座'
					];
					return constellations[m - (d < dates[m - 1] ? 1 : 0)] || '摩羯座';
				};

				// 构建信息对象
				return {
					area: (() => {
						for (let len = 6; len >= 2; len -= 2) {
							const code = id.substr(0, len);
							if (areaCodes[code]) return areaCodes[code];
						}
						return '未知地区';
					})(),
					birthday: `${id.substr(6,4)}-${id.substr(10,2)}-${id.substr(12,2)}`,
					gender: parseInt(id[16]) % 2 ? '男' : '女',
					constellation: getConstellation(parseInt(id.substr(10, 2)), day),
					zodiac: zodiacList[((fullYear - 2020) % 12 + 12) % 12], // 2020鼠年基准
					age: new Date().getFullYear() - fullYear -
						(new Date().getMonth() > month ||
							(new Date().getMonth() === month && new Date().getDate() >= day) ? 0 : 1)
				};
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F5F5FA;
	}

	.result {
		padding: 0 4%;
		margin-top: 20upx;
		background-color: #ffffff;
	}

	.result .title {
		padding: 30upx 0 20upx 0;
		font-size: 30upx;
		font-weight: bold;
	}

	.t_input {
		padding: 20upx 4%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t_input .title {
		height: 80upx;
		line-height: 80upx;
		color: #333;
		font-weight: bold;
		width: 120upx;
	}

	.t_input .inputs {
		color: #333;
		font-size: 32upx;
	}

	.inputs input {
		height: 80upx;
		line-height: 80upx;
		width: 100%;
		display: block;
	}

	.all_btn {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		width: 150upx;
	}

	.jilu {
		height: 60upx;
		line-height: 60upx;
		padding: 0 4%;
		font-size: 28upx;
		color: #999;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-top: 10upx;
	}

	.addclerk {
		width: 80%;
		height: 82upx;
		line-height: 82upx;
		border-radius: 15upx;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		position: fixed;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
		background-color: pink;
	}

	.addclerk:active {
		opacity: 0.8;
	}
</style>
<style>
	page {
		background-color: #F5F5FA;
	}
</style>